import React, { Component } from 'react'
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  TouchableOpacity,
  AsyncStorage
} from 'react-native'
import {
  Form,
  Item, 
  Input, 
  Label,
  Icon,
  Toast
} from 'native-base'
import { NavigationActions } from 'react-navigation'

import _ from 'lodash'

const background = require("./signup_bg.png")
const backIcon = require("./back.png")
const personIcon = require("./signup_person.png")
const lockIcon = require("./signup_lock.png")
const emailIcon = require("./signup_email.png")
const birthdayIcon = require("./signup_birthday.png")


export default class SignupView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      phoneError:false,
      passwordError:false,
      phone:null,
      password:null,
      phoneSuccess:false,
      passwordSuccess:false
    }
    this.signupPress=this.signupPress.bind(this);
    this.signUp=this.signUp.bind(this);
  }
  signupPress(){
    this.props.navigation.navigate( "Login",{ params:  "Login" })
  }
  signUp(){
    if(_.isNil(this.state.password)||_.isNil(this.state.phone)){
      Toast.show({
        text: '手机号或者密码填写不规范',
        position: 'top',
        duration:2000
      });
    }else{
      let user={
        tel:this.state.phone,
        passward:this.state.password,
      }
      AsyncStorage.setItem('user',JSON.stringify(user));
      fetch("http://172.24.10.175/workout/api.php/reg",{
        method: "POST",
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `tel=${this.state.phone}&password=${this.state.password}`
      }).then((response)=>
        response.json()
      ).then((data)=>{
        if(data.error=="手机号已被使用"){
          Toast.show({
            text: "手机号已被使用",
            position: 'top',
            duration:2000
          });
        }else{
          this.props.navigation.navigate("Login")
        }
      }).catch((err)=>{
        console.log('err22222',err)
      })
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <Image 
          source={background} 
          style={[styles.container, styles.bg]}
          resizeMode="cover"
        >
          <View style={styles.headerContainer}>

            <View style={styles.headerIconView}>
              <TouchableOpacity style={styles.headerBackButtonView} onPress={()=>{
                  const resetActions = NavigationActions.reset({
                        index: 0,
                        actions: [NavigationActions.navigate({routeName: 'Login'})]
                    });
                this.props.navigation.dispatch(resetActions);
                }}>
                <Image 
                  source={backIcon} 
                  style={styles.backButtonIcon} 
                  resizeMode="contain"
                />
              </TouchableOpacity>
            </View>

            <View style={styles.headerTitleView}>
              <Text style={styles.titleViewText} onPress={()=>{
                  const resetActions = NavigationActions.reset({
                        index: 0,
                        actions: [NavigationActions.navigate({routeName: 'Login'})]
                    });
                this.props.navigation.dispatch(resetActions);
                }}>Sign Up</Text>
            </View>

          </View>

          <View style={styles.inputsContainer}>

            <Form>
              <Item error={this.state.phoneError} success={this.state.phoneSuccess} fixedLabel>
              <Icon active name='ios-phone-portrait' />
              <Input keyboardType="numeric" placeholder='phone' onChangeText={(e)=>{
                if(e.length!=11){
                  this.setState({
                    phoneError:true,
                    phoneSuccess:false,
                    phone:null
                  })
                }else{
                  this.setState({
                    phoneError:false,
                    phone:e,
                    phoneSuccess:true
                  })
                }
              }}/>
              {this.state.phoneError==true?<Icon name='close-circle' />:(this.state.phoneSuccess==true?<Icon name='checkmark-circle' />:null)}
            </Item>
            <Item style={styles.passwordItem} error={this.state.passwordError} success={this.state.passwordSuccess} fixedLabel last>
              <Icon active name='key'/>
              <Input keyboardType="numeric" secureTextEntry={true} placeholder="password" onChangeText={(e)=>{
                if(e.length<3||e.length>6){
                  this.setState({
                    passwordError:true,
                    passwordSuccess:false,
                    password:null
                  })
                }else{
                  this.setState({
                    password:e,
                    passwordSuccess:true,
                    passwordError:false
                  })
                }
              }}/>
              {this.state.passwordError==true?<Icon name='close-circle' />:(this.state.passwordSuccess==true?<Icon name='checkmark-circle' />:null)}
            </Item>
            </Form>
          </View>

          <View style={styles.footerContainer}>

            <TouchableOpacity>
              <View style={styles.signup}>
                <Text style={styles.whiteFont} onPress={this.signUp}>Join</Text>
              </View>
            </TouchableOpacity>

            <TouchableOpacity>
              <View style={styles.signin}>
                <Text style={styles.greyFont} onPress={this.signupPress}>Already have an account?<Text style={styles.whiteFont}> Sign In</Text></Text>
              </View>
            </TouchableOpacity>
          </View>
        </Image>
      </View>
    );
  }
}

let styles = StyleSheet.create({
  passwordItem:{
    paddingTop:30
  },
  container: {
    flex: 1,
  },
  bg: {
    paddingTop: 30,
    width: null,
    height: null
  },
  headerContainer: {
    flex: 1,
  },
  inputsContainer: {
    flex: 3,
    marginTop: 50,
  },
  footerContainer: {
    flex: 1
  },
  headerIconView: {
    marginLeft: 10,
    backgroundColor: 'transparent'
  },
  headerBackButtonView: {
    width: 25,
    height: 25,
  },
  backButtonIcon: {
    width: 25,
    height: 25
  },
  headerTitleView: {
    backgroundColor: 'transparent',
    marginTop: 25,
    marginLeft: 25,
  },
  titleViewText: {
    fontSize: 40,
    color: '#fff',
  },
  inputs: {
    paddingVertical: 20,
  },
  inputContainer: {
    borderWidth: 1,
    borderColor: 'transparent',
    flexDirection: 'row',
    height: 75,
  },
  iconContainer: {
    paddingHorizontal: 15,
    justifyContent: 'center',
    alignItems: 'center',
  },
  inputIcon: {
    width: 30,
    height: 30,
  },
  input: {
    flex: 1,
    fontSize: 20,
  },
  signup: {
    backgroundColor: '#FF3366',
    paddingVertical: 25,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 15,
  },
  signin: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent',
  },
  greyFont: {
    color: '#D8D8D8'
  },
  whiteFont: {
    color: '#FFF'
  }
})
